<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增邮寄地址</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <link rel="stylesheet" href="statics/css/add_location.css">
</head>
<body>
<div class="add-address-page">
    <div class="page-header">
        <h3>新增邮寄地址</h3>
    </div>

    <div class="page-body">
        <form id="addressForm">
            <!-- 收货人姓名 -->
            <div class="form-group">
                <label class="required">收货人姓名</label>
                <div class="input-wrapper">
                    <input type="text" class="form-input" name="receiverName">
                    <div class="error-message">请填写邮寄人姓名</div>
                </div>
            </div>

            <!-- 所在区域 -->
            <div class="form-group">
                <label class="required">所在区域</label>
                <div class="region-select">
                    <select name="province" class="form-select">
                        <option value="">省</option>
                    </select>
                    <select name="city" class="form-select">
                        <option value="">市</option>
                    </select>
                    <select name="district" class="form-select">
                        <option value="">区/县</option>
                    </select>
                    <div class="error-message">请选择所在地区</div>
                </div>
            </div>

            <!-- 街道地址 -->
            <div class="form-group">
                <label class="required">街道地址</label>
                <div class="input-wrapper">
                    <input type="text" class="form-input" name="streetAddress"
                           placeholder="不需要重复填写省市区">
                    <div class="error-message">请填写详细地址</div>
                </div>
            </div>

            <!-- 邮政编码 -->
            <div class="form-group">
                <label>邮政编码</label>
                <div class="input-wrapper">
                    <input type="text" class="form-input" name="postalCode">
                </div>
            </div>

            <!-- 电话号码 -->
            <div class="form-group">
                <label>电话号码</label>
                <div class="phone-group">
                    <input type="text" class="form-input area-code" name="areaCode" placeholder="区号">
                    <span class="separator">-</span>
                    <input type="text" class="form-input phone-number" name="phoneNumber" placeholder="电话号码">
                    <span class="separator">-</span>
                    <input type="text" class="form-input extension" name="extension" placeholder="分机">
                </div>
            </div>

            <!-- 手机号码 -->
            <div class="form-group">
                <label class="required">手机号码</label>
                <div class="input-wrapper">
                    <input type="text" class="form-input" name="mobilePhone">
                    <div class="error-message">请填写手机号码</div>
                </div>
            </div>
        </form>
    </div>

    <div class="page-footer">
        <button type="button" class="save-btn" onclick="submitForm()">保存</button>
        <button type="button" class="cancel-btn" onclick="history.back()">返回</button>
    </div>
</div>
<script src="statics/js/add_location.js"></script>
</body>
</html>